<template>
	<el-descriptions ref="ruleFormRef" :column="2" direction="vertical" v-loading="isLoading">

		<!-- <el-descriptions-item width="50%" :label='titles.id'>
			{{ isNullOrEmpty( formInline?.id ) }}
		</el-descriptions-item> -->
		<el-descriptions-item width="50%" :label='titles.parentName'>
			{{ isNullOrEmpty( formInline?.parentName ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.unityName'>
			{{ isNullOrEmpty( formInline?.unityName ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.unityType'>
			{{ isNullOrEmpty( UNIT_TYPE_LIST[formInline?.unityType]?.name || '--' ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.unityRole'>
			<!-- <div class="flex flex-wrap gap-[16px]">
				<el-tag v-for="item in formInline?.unityRoleObj" :key="item.id">{{ isNullOrEmpty( item.roleName ) }}</el-tag>
			</div> -->
			<div style="word-break:break-all; " >{{ isNullOrEmpty( formInline?.unityRoleObj?.map((item) => item.roleName).join(',') ) }}</div>
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.contactName'>
			{{ isNullOrEmpty( formInline?.contactName ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.contactPhone'>
			{{ isNullOrEmpty( formInline?.contactPhone ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.remark'>
			<div style="white-space: pre-wrap;">{{ isNullOrEmpty( formInline?.remark ) }}</div>
		</el-descriptions-item>
	</el-descriptions>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref } from "vue";
import { titles } from './index';
import type { infoType } from '@/api/manage/units-manager/units-manager/index';
import { UNIT_TYPE_LIST } from '@/constant/index'
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const ruleFormRef = ref();
//  const newFormInline = ref(props.formInline as any);
//
//
//  watch(()=>props.formInline,()=>{
//  	newFormInline.value = props.formInline
//  },{
//  	deep:true,
//  	immediate:true
//  })

function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
